<template>
    <div class="product-list">
        <ul>
            <li v-for="item in props.productList" :key="item.id">
                <div class="product-card">
                    <a :href="`/product-detail?id=${item.id}`">
                        <img :src="item.imageUrl" :alt="item.name" />
                        <!-- <div class="contact-info">
                            <span>Tel:{{ item.tel }}</span>
                            <span>QQ:{{ item.qq }}</span>
                        </div> -->
                        <h3 class="title">{{ item.name }}</h3></a
                    >
                    <div class="details">
                        <p>货号：{{ item.productId }} CAS号：{{ item.casNo }}</p>
                        <p>分子式：{{ item.formula }} 分子量：{{ item.molecularWeight }}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    productList: {
        type: Array,
        required: true,
        default: () => [],
    },
})
</script>

<style lang="scss" scoped>
.product-list {
    width: 100%;

    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        li {
            float: left;
            width: 25%;
            padding: 10px;

            .product-card {
                border: 1px solid #eee;
                padding: 15px;
                background: #fff;
                transition: all 0.3s;

                &:hover {
                    border-color: rgb(0, 167, 225);
                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

                    img {
                        transform: scale(1.1);
                    }
                }

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                    margin-bottom: 10px;
                }

                .contact-info {
                    margin: 10px 0;
                    color: #999;
                    font-size: 12px;
                    text-align: center;

                    span {
                        margin-right: 15px;
                    }
                }

                .title {
                    margin: 10px 0;
                    color: #0d87dc;
                    text-align: center;
                    font-size: 16px;
                    line-height: 1.4;
                }

                .details {
                    color: #666;
                    font-size: 14px;
                    line-height: 1.6;

                    p {
                        margin: 5px 0;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .drug-list ul li {
        width: 33.333333%;
    }
}

@media screen and (max-width: 768px) {
    .drug-list ul li {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .drug-list ul li {
        width: 100%;
    }
}
</style>
